import React from 'react'
import AppBar from '../../components/AppBar'
import { OrderCard } from '../OrderListPage'
import { orderGet, commentOrder } from '../../api/customer'
import { Formik, Field, Form } from 'formik'
import ReactStars from 'react-stars'

export class OrderComment extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    componentDidMount() {
        orderGet(this.props.match.params.id, (data) => {
            console.log(data);

            this.setState({
                order: data
            })
        })
    }

    handleSubmit(shopComment, delivererComment, shopStar, deliverStar) {
        console.log(deliverStar);

        commentOrder(this.state.order.id, shopComment, delivererComment, shopStar, deliverStar)
    }

    render() {
        if (this.state.order && this.state.order.receiveTime != 0 && this.state.order.cancelTime == 0) {
            let OrderPanel = (!this.state.order)
                ? ''
                : <OrderCard order={this.state.order} />
            return (
                <>
                    <AppBar />
                    <div className="container">
                        {OrderPanel}
                        <CommentPanel handleSubmit={this.handleSubmit} />
                    </div>
                </>
            )
        } else {
            return (
                <>
                    <AppBar />
                    <div className="container">
                        <h2>非法的订单状态</h2>
                    </div>
                </>
            )
        }
    }
}

class CommentPanel extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            ss: 10,
            ds: 10
        }
    }

    render() {
        return (
            <Formik
                onSubmit={(value, actions) => {
                    this.props.handleSubmit(value.sc, value.dc,
                        this.state.ss, this.state.ds)
                    actions.setSubmitting(false)
                }}
                initialValues={{
                    sc: '这家店很棒哦~',
                    dc: '骑手辛苦了~'
                }}
                render={({ errors, status, touched, isSubmitting }) => (
                    <Form>
                        <div className="card" style={{ marginBottom: '20px' }}>
                            <div className="card-body">
                                <div className="form-group">
                                    <label htmlFor="ss">店铺评级</label>
                                    <ReactStars
                                        count={5}
                                        size={48}
                                        onChange={(newRate) => {
                                            this.setState({
                                                ss: newRate * 2
                                            })
                                        }}
                                        value={
                                            this.state.ss / 2
                                        }
                                    />
                                </div>
                                <div className="form-group">
                                    <label htmlFor="sc">店铺评价</label>
                                    <Field className="form-control" id="sc" name="sc" type="text" required />
                                </div>
                            </div>
                        </div>

                        <div className="card" style={{ marginBottom: '20px' }}>
                            <div className="card-body">
                                <div className="form-group">
                                    <label htmlFor="ds">配送员评级</label>
                                    <ReactStars
                                        count={5}
                                        size={48}
                                        onChange={(newRate) => {
                                            this.setState({
                                                ds: newRate * 2
                                            })
                                        }}
                                        value={
                                            this.state.ds / 2
                                        }
                                    />
                                </div>
                                <div className="form-group">
                                    <label htmlFor="dc">配送员评价</label>
                                    <Field className="form-control" id="dc" name="dc" type="text" required />
                                </div>
                            </div>
                        </div>
                        <button type="submit" className="btn btn-lg btn-block btn-warning" disabled={isSubmitting} style={{ marginBottom: '20px' }}>提交评价</button>
                    </Form>
                )}
            />
        )
    }
}